<template>
  <div>
    <div>
      <el-row class="nav">
        <span class="font-weight">{{$store.state.orderTypeName}}</span>
      </el-row>
      <el-divider></el-divider>
      <el-row class="el-header-content">
        <el-col :span="6"
                class="per-item">
          <span class="per-item-txt">搜索：</span>
          <div class="demo-input-suffix"
               style="width:100%">
            <el-input placeholder="请输入搜索名称"
                      prefix-icon="el-icon-search"
                      v-model="searchContent"></el-input>
          </div>
        </el-col>
        <el-col :span="5"
                class="per-item">
          <span class="per-item-txt">创建时间：</span>
          <el-date-picker v-model="dateVal"
                          @change="changeDate"
                          value-format="yyyy-MM-dd"
                          type="daterange"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"></el-date-picker>
        </el-col>
        <el-col style="float:right"
                :span="3">
          <button @click="handleSearch"
                  style="float:right"
                  type="button"
                  class="el-button el-button--primary el-button--medium h30Btn ">查询</button>
        </el-col>
      </el-row>
      <!-- table表格 -->
      <el-row>
        <el-table ref="multipleTable"
                  stripe
                  border
                  :header-cell-style="{background:'#F2F3F8'}"
                  :data="tableData"
                  v-loading="loading"
                  tooltip-effect="dark"
                  style="width: 100%"
                  @selection-change="handleSelectionChange"
                  empty-txt='暂无数据'>
          <el-table-column align="center">
            <template slot="header"
                      slot-scope="scope">
              <el-button class="default"
                         @click="changeSort('id')">
                编号
                <i class="el-icon-sort el-icon--right"></i>
              </el-button>
            </template>
            <template slot-scope="scope">
              <!-- <el-button type="text"
                         size="small"
                         @click="orderDetails(scope.row)">{{Number(scope.row.id)}}</el-button> -->
              <el-button type="text"
                         class='enterDetail'
                         size="small"
                         @click='orderDetails(scope.row)'>
                {{Number(scope.row.id)}}
              </el-button>
            </template>
          </el-table-column>
          <el-table-column prop="clientName"
                           label="客户"
                           align="center">
            <template slot="header"
                      slot-scope="scope">
              <el-button class="default"
                         @click="changeSort('clientName')">
                客户
                <i class="el-icon-sort el-icon--right"></i>
              </el-button>
            </template>
          </el-table-column>
          <el-table-column prop="customType"
                           label="客户类别"
                           align="center">
            <template slot="header"
                      slot-scope="scope">
              <el-button class="default"
                         @click="changeSort('customType')">
                客户类别
                <i class="el-icon-sort el-icon--right"></i>
              </el-button>
            </template>
          </el-table-column>
          <el-table-column prop="classify"
                           label="工单分类"
                           align="center">
            <template slot="header"
                      slot-scope="scope">
              <el-button class="default"
                         @click="changeSort('classify')">
                工单分类
                <i class="el-icon-sort el-icon--right"></i>
              </el-button>
            </template>
            <template slot-scope="scope">{{getClassifyFather(scope.row.classify)}}</template>
          </el-table-column>
          <el-table-column prop="orderType"
                           label="工单流程"
                           align="center">
            <template slot="header"
                      slot-scope="scope">
              <el-button class="default"
                         @click="changeSort('orderType')">
                工单流程
                <i class="el-icon-sort el-icon--right"></i>
              </el-button>
            </template>
          </el-table-column>
          <el-table-column prop="institution"
                           label="涉及机构"
                           align="center">
            <template slot="header"
                      slot-scope="scope">
              <el-button class="default"
                         @click="changeSort('institution')">
                涉及机构
                <i class="el-icon-sort el-icon--right"></i>
              </el-button>
            </template>
            <template slot-scope="scope">{{scope.row.institution}}</template>

          </el-table-column>
          <!-- <el-table-column prop="priority" label="优先级" align="center">
            <template slot="header" slot-scope="scope">
              <el-button class="default" @click="changeSort('priority')">
                优先级
                <i class="el-icon-sort el-icon--right"></i>
              </el-button>
            </template>
          </el-table-column> -->
          <el-table-column prop="userName"
                           label="坐席"
                           align="center">
            <template slot="header"
                      slot-scope="scope">
              <el-button class="default"
                         @click="changeSort('userName')">
                坐席
                <i class="el-icon-sort el-icon--right"></i>
              </el-button>
            </template>
          </el-table-column>
          <el-table-column label="创建时间"
                           align="center">
            <template slot="header"
                      slot-scope="scope">
              <el-button class="default"
                         @click="changeSort('createTime')">
                创建时间
                <i class="el-icon-sort el-icon--right"></i>
              </el-button>
            </template>
            <template slot-scope="scope">{{scope.row.createTimeView}}</template>
          </el-table-column>
          <el-table-column prop='problemDesc'
                           label="工单内容"
                           align="center">
            <template slot="header"
                      slot-scope="scope">
              <el-button class="default"
                         @click="changeSort('problemDesc')">
                工单内容
                <i class="el-icon-sort el-icon--right"></i>
              </el-button>
            </template>
            <template slot-scope="scope">
              <p class="problemDesc">{{scope.row.problemDesc}}</p>
            </template>
          </el-table-column>
          <el-table-column prop='workOrderStatus'
                           label="状态"
                           align="center">
            <template slot="header"
                      slot-scope="scope">
              <el-button class="default"
                         @click="changeSort('workOrderStatus')">
                状态
                <i class="el-icon-sort el-icon--right"></i>
              </el-button>
            </template>
            <template slot-scope="scope">已结案</template>
          </el-table-column>
        </el-table>
      </el-row>
      <!-- 底部操作 -->
      <el-row class="paging-foot page-foot-spacing"
              :gutter="20">
        <div class="fr"
             style="float:right">
          <el-pagination background
                         align='right'
                         class="el-pagination-style"
                         v-show="totalDataLength > 0"
                         @size-change="handleSizeChange"
                         @current-change="handleCurrentChange"
                         :current-page="page"
                         :page-sizes="[10, 20, 50, 100]"
                         :page-size="pageSize"
                         layout="total, sizes, prev, pager, next, jumper"
                         :total="totalDataLength"></el-pagination>
        </div>
      </el-row>
    </div>
  </div>
</template>

<script>

import { deleteBatch, closeBatch } from '@/api/workOrderController'
import { getWorkOrderHislist } from '@/api/WorkOrderHistoryController'
import common from '@/common/common.js'
export default {

  data () {
    return {
      orderType: '',
      searchContent: '', // 搜索字段名
      customType: '', // 客户类别
      institution: '', // 涉及机构
      classify: '', // 工单分类
      // priority: '', // 工单优先级
      source: '', // 工单来源
      clientName: '', // 客户姓名
      userName: '', // 坐席姓名/工号
      problemDesc: '', // 工单内容
      workOrderTypeName: '',
      workOrderStatus: '', // 工单状态
      orderTypes: [],
      orderStatus: [],
      totalDataLength: 0,
      page: 1,
      pageSize: 10,
      selectAllIdLength: 0,
      loading: true,
      tableData: [{
        id: '',
        title: '',
        statusld: '',
        workOrderStatus: '',
        workOrderTypeId: '',
        workOrderTypeName: '',
        // priority: '',
        customType: '',
        source: '',
        clientName: '',
        clientTel: '',
        currentNode: '',
        currentHandlerName: '',
        createTime: '',
        lastUpdateTime: ''
      }],
      multipleSelection: [],
      dateVal: [],
      workOrderFilterId: 2,
      field: '',
      workOrderIdList: [],
      deleteWorkOrderIdList: [],
      sortTag: 1,
      workOrderTypeId: this.$store.state.workOrderTypeId
    }
  },
  computed: {
    typeIdChange () {
      return this.$store.state.orderTypeId
    },
    workOrderTypeIdFun () {
      return this.$store.state.workOrderTypeId
    }
    // getClassifyFather() {
    //   let val = ''
    //   return function (data) {
    //     if (!data) {
    //       return ''
    //       let classifyArr = val.split('/')
    //       for (var i = 0; i < classifyArr.length; i++) {
    //         val = classifyArr[0]
    //         console.log(val)
    //       }
    //       return val
    //     }
    //   }
    // }
  },
  watch: {
    typeIdChange (newVal, oldVal) {
      this.workOrderFilterId = newVal
      this.handleSearch()
    },
    workOrderTypeIdFun (newVal, oldVal) {
      this.workOrderTypeId = newVal
    }
  },
  mounted () {
    if (window.parent.Agent) {
      this.$store.commit('userIdFun', window.parent.Agent.getCurrentAgent().agentId)
    }
    this.handleSearch()
    this.getClassifyFather()
  },
  methods: {
    // 提取工单分类
    getClassifyFather (val) {
      if (val) {
        let classifyArr = val.split('/')
        for (var i = 0; i < classifyArr.length; i++) {
          val = classifyArr[0]
        }
        return val
      }
    },
    // 时间戳的转换
    timestampToTime (timestamp) {
      return common.nothmsTimestampToTime(timestamp)
    },
    // handleChange
    handleChange (val) {
      this.classify = val.join(',')
    },
    orderDetails (val) {
      this.$store.commit('orderHistoryDetailsIdFun', val.id) // 工单编号的id
      this.$router.push('/historyInfoDetail')
    },
    // 排序
    changeSort (val) {
      return false
      // this.field = val
      // if (this.sortTag === 1) {
      //   this.sortTag = 0
      // } else {
      //   this.sortTag = 1
      // }
      // this.handleSearch()
    },
    handleSearch () {
      this.page = 1
      this.handleSearchData()
    },
    // 根据条件查询table表格数据
    handleSearchData () {
      let params1 = {
        searchContent: this.searchContent, // 查询内容
        createTimeList: this.dateVal, // 创建时间
        currentPage: this.page, // 当前页
        pageSize: this.pageSize// 页数量
      }
      getWorkOrderHislist(params1).then(res => {
        let data = res.data
        if (data.retCode === 200) {
          this.tableData = data.data
          this.totalDataLength = data.count
          this.loading = false
        } else {
          this.$message({
            message: data.msg,
            type: 'error'
          })
          // this.loading = false
        }
      })
    },
    changeDate () {
    },
    createForm (val) {
      this.$router.push('/createForm')
      this.$store.commit('orderTypeIdFun', this.$store.state.orderTypeId)
      this.$store.commit('orderTitleFun', val)// 主标题
      sessionStorage.setItem('workOrderIdList', JSON.stringify(''))// 新建工单的时候清空id
      this.$store.commit('orderDetailsIdFun', '')// 新建工单的时候清空id
    },
    handleSizeChange (pageSize) {
      this.pageSize = pageSize
      this.page = 1
      // this.handleSearch()
      this.handleSearchData()
    },
    handleCurrentChange (page) {
      this.page = page
      // this.handleSearch()
      this.handleSearchData()
    },
    // 删除
    deleteSelect () {
      if (this.selectAllIdLength === 0) {
        this.$message({
          message: '请选择删除项',
          type: 'error'
        })
        return
      }
      this.$confirm('确认要删除吗？', '确认删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        center: true,
        customClass: 'messageBox-prompt-delete'
      }).then(() => {
        let params = {
          idList: this.workOrderIdList,
          userId: this.$store.state.userId
        }
        deleteBatch(params).then(res => {
          if (res.data.retCode === 200) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.handleSearch()
            // this.handleSearchData()
          }
        })
      })
    },
    // 关闭
    closeSelect () {
      if (this.selectAllIdLength === 0) {
        this.$message({
          message: '请选择操作项',
          type: 'error'
        })
      } else {
        if (this.workOrderIdList.length === 0) {
          this.$message({
            message: '工单已是关闭状态',
            type: 'error'
          })
        } else {
          this.$confirm('工单关闭后，未流转的工单将停止流转', '确认关闭工单', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            center: true,
            customClass: 'messageBox-prompt-delete'
          }).then(() => {
            let params = {
              idList: this.workOrderIdList,
              userId: this.$store.state.userId
            }
            closeBatch(params).then(res => {
              if (res.data.retCode === 200) {
                this.$message({
                  type: 'success',
                  message: '关闭成功!'
                })
                this.handleSearch()
                // this.handleSearchData()
              }
            }).catch(error => {
              console.log(error)
            })
          })
        }
      }
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
      this.selectAllIdLength = val.length
      this.workOrderIdList = []
      for (var i = 0; i < this.multipleSelection.length; i++) {
        this.deleteWorkOrderIdList.push(this.multipleSelection[i].id)
        if (this.multipleSelection[i].statusName !== '已关闭') {
          this.workOrderIdList.push(this.multipleSelection[i].id)
        }
      }
      sessionStorage.setItem('workOrderIdList', JSON.stringify(this.workOrderIdList))
    },
    change () {
    }
  }
}
</script>
<style scoped>
.paging-foot {
  padding: 20px 0;
}


>>> .el-range-separator {
  width: 6%;
}

>>> .default {
  background: transparent;
  border: none;
}

.btn30-default,
.export {
  color: black;
  background: #f5f6fa;
  margin-left: 20px;
}

>>> .el-icon--right {
  color: #2393f1;
}


.el-row {
  line-height: 30px;
}

.el-divider--horizontal {
  margin: 20px 0;
}

.el-row > .font-weight {
  font-weight: bold;
  color: #231815;
  font-size: 13px;
}

.select-number {
  color: #b50029;
}

.el-button {
  padding: 0;
  /* white-space: pre-wrap; */
}

>>> .el-date-editor .el-range-separator {
  padding: 0;
  margin: 0 5px;
}

.el-header-content {
  margin-bottom: 20px;
  line-height: 40px;
}

.per-item {
  display: flex;
  flex: 1;
  margin-right: 20px;
}

.per-item-txt {
  white-space: nowrap;
  margin-right: 10px;
  /* cursor: pointer; */
}

>>> .el-input__inner {
  min-width: 100%;
}

.item {
  margin-top: 10px;
  /* margin-right: 40px; */
}

>>> .el-badge__content.is-fixed {
  background-color: #f78c35;
  line-height: 15px;
}

/* 排序按钮 */
.el-icon-sort {
  display: none;
}

.behavior-button {
  color: #2594f2;
  text-decoration: underline;
}

>>> .el-input__icon {
  color: #2594f2;
  font-weight: bold;
}

.problemDesc {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

>>> .el-input__icon {
  font-size: 13px;
  font-weight: 800;
  color: #c0c4cc;
}

.enterDetail {
  text-decoration: underline;
  color: #4786c3;
}
</style>
